<template>
<div>
    <div class="header" :style="headerStyle">
      <div class="title u-flex u-row-center">
        <h3  class="u-text-center titletitle">积分中心</h3>
        <p class="headertip">规则说明</p>
      </div>
      <div class="u-flex u-row-between u-col-center avatarBox">
        <div class="u-flex  u-col-center ">
        <u-avatar size="large" :src="user.headimgurl"></u-avatar>
          <div class="u-m-l-20">
            <p class="score">{{user.integral}}</p>
            <p class="scoreTip"> 当前累计积分</p>
          </div>
        </div>
        <p class="record u-flex u-col-center" @click="$u.route('/pagesC/integral/recordList')"><u-icon name="../../static/images/icon-score2.png" color="#ff9900" size="38"></u-icon>记录</p>
      </div>
    </div>

  <div class="taskList">
    <div class="taskTitle u-flex u-row-between">
      <h3 >每日任务</h3>
        <div>
          <span>
            已领取积分{{integral_info.completed_integral}}
           </span> <span>/ 每天总积分{{integral_info.total_integral}} </span>
        </div>
    </div>
      <u-read-more ref="uReadMore" show-height="600" color="#e1e1e1" close-text="查看更多" text-indent="0">
    <view>
      <div class="taskItem u-flex u-row-between u-col-center" v-for="(item,index) in taskList" :key="index" >
        <div class="taskleft">
        <h4 class="taskname">{{item.task_name}}   <u-tag :text="item.tag_name" class="u-m-l-20" size="mini" type="warning" mode="light" /></h4>
          <p class="u-m-t-10 u-m-b-10 u-flex u-col-center">
            <u-icon name="../../static/images/icon-score2.png" color="#ff9900" size="38"></u-icon>{{item.integral}}积分</p>
        </div>
        <div class="taskright">
          <u-button type="error" shape="circle" size="mini" :custom-style="item.status===2?customStyle:customStyleSuccess" @click="doTask(item)">{{item.status===2?'做任务':'已完成'}}</u-button>
        </div>
      </div>
    </view>
      </u-read-more>

      <view class="goodsWrap u-flex ">
        <div class="goodsCard" v-for="(item,index) in goodsList" :key="index" @click="$u.route({url:'/pagesC/homeSon/goodsDetails',params:{id:item.goods_id}})">
            <u-image width="100%" height="290" :src="item.goods_img" border-radius="12"></u-image>
          <h3 class="u-line-1 goodsCardname"> {{item.goods_name}}</h3>
          <p class="pricebox">
            <span class="pricebox1" v-if="item.integral_cate!==3"><span style="font-size: 24upx">¥</span>{{item.shop_price}}</span>
            <span class="pricebox2" >{{item.integral}}积分</span>
          </p>
          <u-tag :text="item.cate_str" shape="circle" size="mini" type="warning" plain></u-tag>
          <p class="goodsCardtips" :style="{color:$u.color['tipsColor']}">{{item.buy_count}} 件已领取}} </p>
        </div>

      </view>

  </div>
</div>
</template>

<script>
export default {
name: "index",
  data(){
    return{
      user:{
        headimgurl:'',
        integral:'',
        user_name:''
      },
      taskList:[],
      goodsList:[],
      customStyle:{
        "background":'linear-gradient(45deg, rgb(0, 114, 255), rgb(119 255 255)',
        "padding":"30upx 20upx",
        "box-shadow":"0 10upx 16upx #9fddff"
      },
      customStyleSuccess:{
        "background":'#c9cbce',
        "padding":"30upx 20upx",
      },
      headerStyle:{},
      integral_info:{}
    }
  },
  onLoad(){
    this.$set(this,'headerStyle',{'background':`url(${this.STATICURL}images/bg-integral.jpg)`,'backgroundSize':'cover'})
      this.getScoreUserInfo()
      this.getScoreTaskList()
    this.getIntegralGoodsList()
  },
  onUnload(){
    uni.$off('openShareApp',()=>{})
  },
  methods:{
    getScoreUserInfo(){
      this.$http.getScoreUserInfo().then(res=>{
          this.user = res.data.user

      })
    },
    getScoreTaskList(){
      this.$http.getScoreTaskList().then(res=>{
          this.taskList = res.data.task_list
        this.integral_info = res.data.integral_info
        this.$nextTick(() => {
          this.$refs.uReadMore.init();
        })
      })
    },
    getIntegralGoodsList(){
      this.$http.getIntegralGoodsList().then(res=>{
          this.goodsList = res.data.goods_list
      })
    },
    doTask(item){
        if(item.status===1){
          return this.$toast('此任务已完成')
        }
        if(item.cate_id===1){
          this.$u.route({url:'/pagesB/personalSon/signin'})
        }
        if(item.cate_id===2){
          this.$u.route({url:'/pagesB/personalSon/Setup'})
        }
      if(item.cate_id===3){
        this.$u.route({url:'/pages/tabBar/Live',type:'tab'})

      }
      if(item.cate_id===4){
        this.$u.route({url:'/pages/tabBar/Live',type:'tab'})

      }
      if(item.cate_id===5){
        this.$u.route({url:'/pagesC/homeSon/goodsDetails'})
      }
      if(item.cate_id===6){
        this.$u.route({url:'/pages/tabBar/my',type:'tab'})
        uni.$emit('openShareApp',{})
      }
      if(item.cate_id===8){
        this.$u.route({url:'/pages/tabBar/Home',type:'tab'})

      }
      if(item.cate_id===9){
        this.$u.route({url:'/pagesC/homeSon/allOrder',params:{index:4}})

      }
    },


  }
}
</script>

<style lang="scss" scoped>
page{
  background-color: #F5F5F5;
}
.title{
  color: #fff;
  padding: 25upx;
}
.header{
  background-image:linear-gradient(to right,#FF4901,#FF9400);
  position: relative;
  padding-top: var(--status-bar-height);
  position:relative;

  &title{
    font-size: 36upx;
  }
  &tip{
    position: absolute;
    right: 30upx;
  }
  &::after{
    content: '';
    position: absolute;
    bottom: -60upx;
    width:100%;
    background-image: inherit;
    height: 60upx;
    border-radius:0 0  100% 100%;
    background-size: cover;
  }
.avatarBox{
  padding: 30upx 30upx 0;
  .score{
    font-size: 58upx;
    font-weight: 800;
    color: #fff;
  }
  .scoreTip{
    font-size: 28upx;
    color:#ffe7d9
  }
  .record{
    color: #fff;
    background-color: #feb14d;
    padding:6upx 14upx;
    border-radius: 100px;
  }
}
}
.card{
  background-color: #fff;
  margin: 15upx;
  padding: 15upx;
  border-radius:12upx ;
}
.taskList{
  @extend .card;
  margin-top: 80upx;
  .taskTitle{
    color: #333;
    font-size: 30upx;
    font-weight: 600;
    margin-bottom: 30upx;
    margin-top: 30upx;
  }
  .taskItem{
    margin-bottom: 10upx;
    border-bottom:2upx solid #f5f5f5;
    padding:20upx;
    .taskname{
      color:#444;

    }
  }
}
.goodsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

    .goodCard {
      width: 49%;
    }
}

.demo-warter {
  border-radius: 8px;
  margin: 5px;
  background-color: #ffffff;
  position: relative;
  padding-bottom: 10upx;
}
.goodsWrap{
  flex-wrap: wrap;
  background-color: #F5F5F5;
  justify-content: space-between;
  margin-top:30upx;
}
.goodsCard{
  flex-basis: 48%;
  width:49%;
  margin:15upx 0;
  padding:15upx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius:12upx;
  &tips{
    font-size: 24upx;
    margin-top: 6upx;
  }
  &name{
    color:#444;
    font-size: 30upx;
    margin:10upx 0;
  }
  .pricebox{
    margin:10upx 0 5upx;
    &1{
      font-size: 38upx;
      color:#fa3f3f;
      font-weight: 800;
    }
    &2{
      color:#ff9900;
      margin-left:10upx;
    }
  }
}
</style>
